import React,{useState,useEffect} from 'react'
import { Breadcrumb } from 'antd';
import {useLocation} from 'react-router-dom'
import api from '../api'

export default function MyBreadcrumb() {
  
  useEffect(()=>{
    getAuthMenu()
  },[])
  const location=useLocation()
  const [breadcrumbAry,setBreadcrumbAry]=useState()
  //获取到权限数据
  const getAuthMenu=async()=>{
    //1、完成从后端获取权限的数据
    const result=await api.users.getAuthMenus()
    console.log('result',result.data);
    //2、转换成面包屑结构的数据
    let breadcrumbDataObj={}
    result.data.forEach(item=>{
      if(item.children){
        item.children.forEach(subItem=>{
          breadcrumbDataObj[subItem.path]=[item,subItem]
        })
      }
    })
    //3.获取路径并通过路径从面包屑结构中获取到数据
 
    let pathname=location.pathname
    console.log('aa',breadcrumbDataObj[pathname]);
    //将数据设置成状态
    setBreadcrumbAry(breadcrumbDataObj[pathname])
  }
//  const breadcrumbData={
//     "/home/workplace": [{title:'控制面板',path:'/dashboard'},{title:'工作台',path:'/home/workplace'}],
//     "/home/analysis":[{title:'控制面板',path:'/dashboard'},{title:'数据分析',path:'/home/analysis'}],
//     "/home/userList":[{title:'系统管理',path:'/system'},{title:'用户管理',path:'/home/userList'}],
//     "/home/userDetail":[{title:'系统管理',path:'/system'},{title:'用户详情',path:'/home/userDetail'}],
//  }
//  //调用useLocation()
//  const location=useLocation()
//  let pathname=location.pathname
 /**
  * 通过useMemo来完成计算属性的功能
  * useMemo hook函数的作用是充当计算属性的功能
  * 参数1：回调函数，完成具体的业务功能
  * 参数2：要依赖的数据
  * 返回值：计算出来的结果
  */
//  let breadcrumbAry=useMemo(()=>{
//   if(/\/[a-z0-9]{24}/.test(pathname)){
//     pathname=pathname.substring(0,pathname.lastIndexOf("/"))
//   }
//   return breadcrumbData[pathname]
//  },[pathname])

 

  return (
    <>
        <Breadcrumb>
            {
                !breadcrumbAry?[].map((item,index)=><Breadcrumb.Item key={index}>{item.title}</Breadcrumb.Item>):breadcrumbAry.map((item,index)=><Breadcrumb.Item key={index}>{item.title}</Breadcrumb.Item>)
            }
        </Breadcrumb>
    </>
  )
}
